<template>
<div>
  <i-frame :src="url"/>
<div @click = "btn">点击</div>
<!-- <div class="overlay-image">
      <img src="https://img1.baidu.com/it/u=2376489989,3127732063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=657" alt="Overlay" />
    </div> -->
</div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getReportUrl } from '@/api/tool/jimu.js'
import iFrame from "@/components/iFrame/index.vue"

export default {
  name: "ReportDesign",
  components: { iFrame },
  data() {
    return {
      url: ""
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getReportUrl().then(res => {
        this.url = res + "?token=Bearer " + getToken();
        console.log(this.url)
      });
    },
    btn(){
    // 获取image元素
    const iframe = document.querySelector('iframe'); // 获取 iframe 元素
    console.log('iframe',iframe)

   // 确保 iframe 已加载完成
   const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

   // 获取 SVG 内的 image 元素
   const imageElement = iframeDoc.getElementById('image0');
   console.log('imageElement',imageElement)
 // if (imageElement) {
 //   // 替换图片（使用新的 base64 或 URL）
 //   imageElement.setAttribute('href', 'data:image/png;base64,...[新的base64数据]');
 // } else {
 //   console.error('无法找到 image0 元素');
 // }
    // 替换图片的base64数据
    //imageElement.setAttribute('href', 'data:image/png;base64,...[新的base64数据]');
    }
  }
};
</script>
<style>
.iframe-container {
  position: relative;
  width: 260px;
  height: 70px;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 
}

.overlay-image img {
  width: 100%;
  height: 47px;
  object-fit: cover;
   pointer-events: none;
   cursor: not-allowed;
}
</style>
